<template>
  <div class="type">
    <!-- 搜索 -->
    <van-search
      v-model="value"
      show-action
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="searchPopup()"
    />
    <!-- 左侧导航栏 -->
    <van-sidebar v-model="activeKey">
      <!-- 左侧bar -->
      <span class="left-bar">
        <van-sidebar-item
          v-for="(item,index) in categoryList"
          :key="item.id"
          @click="fun(index,item.id)"
          :title="item.name"
        />
      </span>
      <!-- 右侧的内容 -->
      <span class="left-content">
        <jujia
          :categoryListId="categoryListId"
          :categoryList="categoryList"
          :currentCategory="currentCategory"
          v-show="isShow==this.isShow"
        ></jujia>
      </span>
    </van-sidebar>
  </div>
</template>

<script>
// 引入api的接口数据  大页面的数据，小页面的数据
import { GetTypcList, currentCategory } from "@/request/api.js";
// 各个小的页面
import jujia from "@/components/type/jujia.vue";
import canchu from "@/components/type/canchu.vue";
export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      isShow: "0",
      ids: "",
      categoryList: [],
      categoryListId: "",
      currentCategory: []
    };
  },
  methods: {
    // 搜索
    searchPopup() {
      // console.log(111);
      this.$router.push("/home/searchPopup");
    },
    // 点击左侧分类，显示内容
    fun(v, id) {
      // v是isShow  id是id
      // console.log(v,id);
      this.isShow = v;
      this.ids = id;
      GetTypcList()
        .then(res => {
          // 拿到外层大的数据 categoryList
          this.categoryList = res.data.categoryList;
          // 拿到大的单独的数据，索引 categoryListId
          this.categoryListId = res.data.categoryList[this.isShow];
          // console.log(this.categoryListId);
        })
        .catch(err => {
          console.log(err);
        });
      // 拿到右侧的遍历内容
      currentCategory({ id: this.ids }).then(res => {
        this.currentCategory = res.data.currentCategory;
      });
    }
  },
  components: {
    jujia,
    canchu
  },
  // 接大页面的数据
  created() {
    // 大页面的首屏
    GetTypcList()
      .then(res => {
        // console.log(this.isShow);
        this.categoryList = res.data.categoryList;
        this.categoryListId = res.data.categoryList[this.isShow];
        // console.log(categoryListId);
      })
      .catch(err => {
        console.log(err);
      });
    // 小页面的首屏
    currentCategory({ id: "1005000" }).then(res => {
      this.currentCategory = res.data.currentCategory;
      // console.log(this.currentCategory);
    });
  }
};
</script>

<style lang='less' scoped>
.type {
  background-color: #fff;
}
.left-bar {
  width: 1rem;
  height: 7.6667rem;
  background-color: #f7f8fa;
  display: inline-block;
}
.left-content {
  display: inline-block;
  width: 79%;
  position: absolute;
  top: 0.5333rem;
  right: 0;
}
</style>

